<template>
  <div>
<!-- 面包屑 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item>商品管理</el-breadcrumb-item>
        <el-breadcrumb-item>添加商品</el-breadcrumb-item>
    </el-breadcrumb>  
<!-- 卡片区域  -->
    <el-card>
        <!-- 警告区域 -->
        <el-row>
            <el-col>
                  <el-alert title="添加商品信息" type="info" center show-icon :closable='false'></el-alert>
            </el-col>
        </el-row>
        <!-- 步骤条 -->
        <el-row class="steps_top">
            <el-col>
                <!-- 这里要接收数字，需转换 -->
                <el-steps :active="activeindex-0" align-center>
                    <el-step title="基本信息"></el-step>
                    <el-step title="商品参数"></el-step>
                    <el-step title="商品属性"></el-step>
                    <el-step title="商品图片"></el-step>
                    <el-step title="商品内容"></el-step>
                    <el-step title="完成"></el-step>
                </el-steps>
            </el-col>
        </el-row>

        <!-- 标签页 -->
        <el-form :model="addform" :rules="addformrules" ref="ruleFormref" label-width="100px" label-position="top">
          <el-tabs v-model="activeindex" tab-position="left" :before-leave='beforetableave' @tab-click="tabclick">
            <el-tab-pane name='0' label="基本信息">
                <el-form-item label="商品名称" prop="goods_name">
                    <el-input v-model="addform.goods_name"></el-input>
                </el-form-item>
                <el-form-item label="商品价格" prop="goods_price">
                    <el-input v-model="addform.goods_price" type="number"></el-input>
                </el-form-item>
                <el-form-item label="商品重量" prop="goods_weight">
                    <el-input v-model="addform.goods_weight" type="number"></el-input>
                </el-form-item>
                <el-form-item label="商品数量" prop="goods_number">
                    <el-input v-model="addform.goods_number" type="number"></el-input>
                </el-form-item>
                <el-form-item label="商品分类" prop="goods_cat">
                      <!-- 分类级联选择器 -->
                      <el-cascader
                        v-model="addform.goods_cat"
                        :options="goodslists"
                        :props="{ expandTrigger: 'hover',value:'cat_id',label:'cat_name',children:'children'}"
                        @change="handleChange"></el-cascader>
                </el-form-item>
            </el-tab-pane>
            <el-tab-pane name='1' label="商品参数">
                <!-- 渲染表单的item项 -->
                <el-form-item v-for='(item,index) of manytabdate' :key='index' :label="item.attr_name">
                        <!-- 复选框组 -->
                      <el-checkbox-group v-model="item.attr_vals">
                        <el-checkbox border v-for='(vals,ind) of item.attr_vals' :key='ind' :label="vals"></el-checkbox>
                    </el-checkbox-group>
                </el-form-item>
            </el-tab-pane>
            <el-tab-pane name='2' label="商品属性">
                <el-form-item v-for='(item,index) of onlytabdate' :key='index' :label="item.attr_name">
                    <el-input v-model="item.attr_vals" placeholder="请输入内容"></el-input>
                </el-form-item>
            </el-tab-pane>
            <el-tab-pane name='3' label="商品图片">
                <!-- action='上传地址' 图片想要上传到的后台api地址，写完整的地址
                    on-preview="handlePreview 图片预览事件
                    on-remove="handleRemove" 点击右上角的差号出发事件
                    list-type="" 图片在页面上呈现的效果
                    headers  上传图片需单独添加请求头
                    on-success="handlesuccess 上传成功后的操作，保存临时地址
                 -->
                <el-upload
                    :action="uploadurl"
                    :on-preview="handlePreview"
                    :on-remove="handleRemove"
                    list-type="picture"
                    :headers="httpheaders"
                    :on-success="handlesuccess">
                    <el-button size="small" type="primary">点击上传</el-button>
                </el-upload>
            </el-tab-pane>
            <el-tab-pane name='4' label="商品内容">
                <!-- 副文本编辑器使用 ,内容会自动添加到表单 addform.goods_introduce-->
                <quill-editor v-model="addform.goods_introduce"></quill-editor>
                <!-- 添加商品按钮 -->
                <el-row class="addmartintop">
                    <el-col>
                        <el-button type="primary" @click='add'>添加商品</el-button>
                    </el-col>
                </el-row>
            </el-tab-pane>
        </el-tabs>
        </el-form>
    </el-card>

    <!-- 预览图片弹出框 -->
    <el-dialog
    title="预览图片"
    :visible.sync="dialogVisible"
    width="50%">
    <img class="imgwidth" :src="imgpath" alt="">
    </el-dialog>
  </div>
</template>

<script>
// 导入lodash 这里用于深拷贝
import _ from 'lodash'

export default {
  name: 'add',
  data(){
      return{
        //   控制当前显示的步骤被激活
        activeindex:'0',
        //   添加商品的数据项对象
        addform:{
            goods_name:'',//商品名称
            goods_price:0,//商品价格
            goods_weight:0,//商品重量
            goods_number:0,//商品数量
            goods_cat:[],//商品分类的数组,// 当前选中的分类id的数组
            pics:[],//上传图片的临时地址
            goods_introduce:'',//商品的详情描述
            attrs:[],//存放动态参数和静态属性
        },
        //   添加商品的验证规则
        addformrules:{
            goods_name:[
                {required:true,message:'请输入商品名称',trigger:'blur'},
                {min:1,message:'长度最少1个字符',trigger:'blur'}
            ],
            goods_price:[
                {required:true,message:'请输入商品价格',trigger:'blur'},
            ],
            goods_weight:[
                {required:true,message:'请输入商品重量',trigger:'blur'},
            ],
            goods_number:[
                {required:true,message:'请输入商品数量',trigger:'blur'},
            ],
            goods_cat:[
                {required:true,message:'请输入商品分类',trigger:'blur'},
            ],
        },
        // 所有商品分类列表数据
        goodslists:[],
        // 指定级联选择器的配置对象
        value:'cat_id',
        label:'cat_name',
        children:'children',
        // 动态参数列表数据
        manytabdate:[],
        // 静态属性参数列表数据
        onlytabdate:[],
        // 上传的图片地址
        uploadurl:'http://127.0.0.1:8888/api/private/v1/upload',
        // 上传图片的请求头
        httpheaders:{
            Authorization:sessionStorage.getItem('token')
        },
        // 预览的图片地址
        imgpath:'',
        // 预览图片弹出框的显示与隐藏
        dialogVisible:false,
      }
  },
  computed:{
    //   获取当前三级分类的id
      cateid(){
          if(this.addform.goods_cat.length==3){
              return this.addform.goods_cat[2]
          }else{
              return null
          }
      }
  },
  methods:{
    //   获取所有商品分类
      async getgoodslists(){
          const {data:res}=await this.$axios.get('/categories')
          if(res.meta.status!==200) return this.$message.error('获取商品分类失败');
          this.goodslists=res.data
      },
    //   当级联选择器发生改变时触发
    handleChange(){
        // 判断数组的长度
        if(this.addform.goods_cat.length!==3){
            this.addform.goods_cat=[]
            return
        }
    },
    // 监听标签页的切换,判断是否可以切换
    beforetableave(newactivename,oldactivename){
        if(oldactivename==='0' && this.addform.goods_cat.length!==3){
            this.$message.error('请选择商品分类')
            return false
        }
    },
    // 监听标签页的点击事件，展示对应的数据
    tabclick(){
        // 证明点击了商品参数选项，应发送请求
        if(this.activeindex==1){
            this.$axios.get(`categories/${this.cateid}/attributes`,{
                params:{
                    sel:'many'
                }
            }).then(res=>{
                if(res.data.meta.status!==200) return this.$message.error('获取商品参数失败')
                // 将attr_vals转换为数组
                res.data.data.forEach(item => {
                    item.attr_vals=item.attr_vals?item.attr_vals.split(','):[]
                });
                this.manytabdate=res.data.data
            })
        }else if(this.activeindex==2){
            this.$axios.get(`categories/${this.cateid}/attributes`,{
                params:{
                    sel:'only'
                }
            }).then(res=>{
                if(res.data.meta.status!==200) return this.$message.error('获取商品属性失败')
                this.onlytabdate=res.data.data
            })          
        }
    },
    // 处理图片预览
    handlePreview(file){
        console.log(file)
        // 1.获取图片完整地址
        this.imgpath=file.response.data.url
        this.dialogVisible=true
    },
    // 移除图片
    handleRemove(filt){
        // 1.获取将要移除的图片的临时路径
        const filtpath=filt.response.data.tmp_path
        // 2.从 pics 数组中，找到直观图片对应的索引值
        const i =this.addform.pics.findIndex(x=>x.pic===filtpath)
        // 3.调用数组的 splice 方法，把图片从数组删除
        this.addform.pics.splice(i,1)
    },
    // 监听图片上传成功
    handlesuccess(rescope){
        // 1.拼接得到的一个图片信息地址对象
        const images={
            pic:rescope.data.tmp_path
        }
        // 2.将图片信息对象 push到pics数组
        this.addform.pics.push(images)
    },
    // 点击添加商品按钮，提交
    add(){
        // 表单预验证
        this.$refs.ruleFormref.validate(valid=>{
            if(!valid){
              return this.$message.error('请完善商品信息')
            }


            // 处理1：
            // 1.需要将数组转换为字符串，这里不能直接赋值，
                // 需要用深拷贝
                // lodash.cloneDeep(obj)
                const form=_.cloneDeep(this.addform)
                form.goods_cat=form.goods_cat.join(',')

            // 处理2：
            // 处理动态参数
            this.manytabdate.forEach(item=>{
                const newinfo={
                    attr_id:item.attr_id,
                    attr_value:item.attr_vals.join(',')
                }
                this.addform.attrs.push(newinfo)
            })
            // 处理静态属性
            this.onlytabdate.forEach(item=>{
                const newinfo={
                    attr_id:item.attr_id,
                    attr_value:item.attr_vals
                }
                this.addform.attrs.push(newinfo)
            })
            form.attrs=this.addform.attrs
            
            // 发起请求，添加商品
            // 商品的名称，必须是唯一的
            this.$axios.post('/goods',form).then(res=>{
                if(res.data.meta.status!==201) return this.$message.error('添加商品失败')
                this.$message.success('添加商品成功')
                this.$router.push('/goods')
            })
        })
    }
  },
  created(){
      this.getgoodslists()
  }
}
</script>

<style lang="less" scoped>
.steps_top{
    margin:15px 0;
}
.el-checkbox{
    margin:0 10px 10px 0!important;
}
.imgwidth{
    width: 100%;
}
.addmartintop{
    margin-top: 15px;
}
</style>
